<template>
  <div class="one-preview-container">
    <main class="content flex">
      <div class="content-left">
        <div
          v-for="(question, index) in list"
          :key="index"
          @click="onToggleQuestion(question)"
          :class="isExist(question.topic_id) && 'topic-active'"
        >
          <AssignTopic
            :topic-data="question.question_detail"
            :index="question.index"
          />
        </div>
      </div>
      <div class="content-right">
        <div class="flex-between">
          <span class="font-weight">举一反三目录</span>
          <el-button
            type="primary"
            @click="onPublish"
            :disabled="!selectQuestionList.length"
            >发布任务</el-button
          >
        </div>
        <div class="select-list flex">
          <el-checkbox-group v-model="checkList">
            <el-checkbox
              :label="`正确: ${studentList[0].length}人`"
              :disabled="!studentList[0].length"
              value="0"
              class="right-check"
            />
            <el-checkbox
              :label="`错误 : ${studentList[1].length}人`"
              :disabled="!studentList[1].length"
              value="1"
              class="wrong-check"
            />
            <el-checkbox
              :label="`半对 : ${studentList[2].length}人`"
              :disabled="!studentList[2].length"
              value="2"
              class="half-check"
            />
          </el-checkbox-group>
        </div>
        <div class="preview-box">
          <div class="flex-between header">
            <span>题号</span>
            <span>发布的学生</span>
          </div>
          <ul class="question-list">
            <li
              v-for="(question, index) in selectQuestionList"
              :key="index"
              class="question-item flex-between"
            >
              <span>{{ question.index }}</span>
              <span v-if="checkList.length">
                {{
                  checkList.includes('0')
                    ? `正确${studentList[0].length}人`
                    : ''
                }}
                {{
                  checkList.includes('1')
                    ? `错误${studentList[1].length}人`
                    : ''
                }}
                {{
                  checkList.includes('2')
                    ? `半对${studentList[2].length}人`
                    : ''
                }}
              </span>
              <span v-else>0人</span>
            </li>
          </ul>
        </div>
      </div>
    </main>
    <TaskDrawer
      v-model:visible="showPublish"
      :task-type="3"
      :one-list="selectQuestionList"
      :class-select="props.classSelect"
      :student-list="selectStudentList"
      :source-task-id="props.taskInfo.task_id"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import AssignTopic from '../components/AssignTopic.vue'
import { cloneDeep } from 'lodash'
import TaskDrawer from '@/components/publish-task/TaskDrawer.vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  questionList: {
    default: []
  },
  studentList: {
    default: []
  },
  classSelect: {
    type: Object
  },
  taskInfo: {
    type: Object
  }
})

const showPublish = ref(false)
const checkList = ref([])
const selectStudentList = ref([])
const onPublish = () => {
  let students = []
  checkList.value.map(v => {
    students.push(
      ...props.studentList[Number(v)].map(student => ({
        student_name: student.student_name,
        student_id: student.student_id
      }))
    )
  })
  if (!students.length) {
    ElMessage.error('请选择学生！')
    return
  }

  selectStudentList.value = students
  showPublish.value = true
}
const list = ref(
  props.questionList.map((question, index) => ({
    ...question,
    index: index + 1
  }))
)

const selectQuestionList = ref(cloneDeep(list.value))
const onToggleQuestion = question => {
  let index = selectQuestionList.value.findIndex(
    item => item.topic_id === question.topic_id
  )
  if (index >= 0) {
    selectQuestionList.value.splice(index, 1)
    return
  }
  selectQuestionList.value.push(question)
  selectQuestionList.value.sort((a, b) => a.index - b.index)
}

const isExist = id => {
  return selectQuestionList.value.map(item => item.topic_id).indexOf(id) !== -1
}
</script>

<style lang="less" scoped>
.one-preview-container {
  margin-bottom: 20px;
  .content {
    gap: 20px;
    align-items: self-start;
    .content-left {
      width: 70%;
      :deep(.assign-topic) {
        cursor: pointer;
      }
      .topic-active {
        :deep(.topic-cpn) {
          border: 2px solid @theme-color;
        }
      }
    }
    .content-right {
      flex: 1;
      height: 100%;
      background-color: #fff;
      padding: 20px;
      .select-list {
        .right-check {
          :deep(.el-checkbox__input .el-checkbox__inner) {
            //选中
            border-color: #4ec680;
            &::after {
              border-color: #4ec680;
            }
          }
          :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
            background-color: #4ec680;
            &::after {
              border-color: #fff;
            }
          }
          :deep(.el-checkbox__input.is-checked + .el-checkbox__label),
          :deep(.el-checkbox__label) {
            color: #4ec680;
          }
        }

        .wrong-check {
          :deep(.el-checkbox__input .el-checkbox__inner) {
            //选中
            border-color: #ff6d65;
            &::after {
              border-color: #ff6d65;
            }
          }
          :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
            background-color: #ff6d65;
            &::after {
              border-color: #fff;
            }
          }
          :deep(.el-checkbox__input.is-checked + .el-checkbox__label),
          :deep(.el-checkbox__label) {
            color: #ff6d65;
          }
        }
        .half-check {
          :deep(.el-checkbox__input .el-checkbox__inner) {
            //选中
            border-color: #d89b25;
            &::after {
              border-color: #d89b25;
            }
          }
          :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
            background-color: #d89b25;
            &::after {
              border-color: #fff;
            }
          }
          :deep(.el-checkbox__input.is-checked + .el-checkbox__label),
          :deep(.el-checkbox__label) {
            color: #d89b25;
          }
        }
      }
      .preview-box {
        margin-top: 10px;
        .header {
          color: #b4b6ba;
          border-bottom: #b4b6ba 1px solid;
          padding: 10px 0;
        }
        .question-list {
          .question-item {
            line-height: 2.4;
          }
        }
      }
    }
  }
}
</style>
